<template lang="html">

  <div class="car">
    <header class="header">
      <div>
        <img class="header-icon" v-if='userForm && userForm.avatar'
             :src='"http://114.55.102.36:8809"  + userForm.avatar'>
        <span class="icon2-user header-icon" v-else></span>
      </div>
      <span>{{ userForm.nickname ==='' ? userForm.account :  userForm.nickname}}</span>
    </header>


    <div class='foreground'>
      <div class="item">
        <p>我的茶籽</p>
        <p>{{ userForm.teaNum }}</p>
      </div>

      <div class="item">
        <p>我的等级</p>
        <p :class="{'gradeActive':isActive}"> {{ userForm.roleName }}</p>
      </div>
    </div>

    <div class="main">
      <router-link class="my-indent" :to="{ path: '/order'}">
        <span class="my-indent-left">我的订单</span>
        <div class="my-indent-right">
          <span>全部订单</span>
          <i class="icon-go"></i>
        </div>
      </router-link>

      <section class="my-pay">
        <router-link :to="{ path: '/order', query: {paid: 0, status: 0}}">
          <img src="../assets/daifukuan.png" style="width: 30px; height: 30px;"/>
          <p>待付款</p>
        </router-link>
        <router-link :to="{ path: '/order', query: {paid: 1, status: 1}}">
          <img src="../assets/daishouhuo.png" style="width: 30px; height: 30px;"/>
          <p>待收货</p>
        </router-link>
        <router-link :to="{path: '/order', query: {paid: 1, status: 2}}">
          <img src="../assets/yishouhuoshuliang_huaban.png" style="width: 30px; height: 30px;"/>
          <p>已收货</p>
        </router-link>
      </section>

      <section class="my-vip">
        <router-link class="my-vip-top ho" :to="{ path: '/address'}">
          <div class="c">
                <span class="icon2-vip">
                  <img src="../assets/tudiguanliye.png" style="width: 30px; height: 30px;"/>
                </span>
          </div>
          <p>
            <span>地址管理</span><i class="icon-go"></i>
          </p>
        </router-link>
      </section>

      <!--  <section class="my-vip">
          <router-link class="my-vip-top ho" :to="{ path: '/land'}">
            <div class="my-vip-top-div">
                  <span class="icon2-vip">
                    <img src="../assets/goumaiyongdi2x.png" style="width: 30px; height: 30px;"/>
                  </span>
            </div>
            <p>
              <span>购买土地</span><i class="icon-go"></i>
            </p>
          </router-link>
        </section> -->


      <section class="my-service">
        <router-link class="my-service-top" :to="{ path: '/QR'}">
          <div>
              <span class="icon2-service">
                   <img src="../assets/icon-test.png" style="width: 30px; height: 30px;"/>
              </span>
          </div>
          <p>
            <span>邀请好友</span><i class="icon-go"></i>
          </p>
        </router-link>
      </section>

      <section class="my-service">
        <router-link class="my-service-top" :to="{ path: '/watter'}">
          <div>
              <span class="icon2-service">
                   <img src="../assets/watter.png" style="width: 30px; height: 30px;"/>
              </span>
          </div>
          <p>
            <span>我的收益</span><i class="icon-go"></i>
          </p>
        </router-link>
      </section>

      <section class="my-service">
        <router-link class="my-service-top" :to="{ path: '/team'}">
          <div>
              <span class="icon2-service">
                   <img src="../assets/wodetuandui.png" style="width: 30px; height: 30px;"/>
              </span>
          </div>
          <p>
            <span>我的团队</span><i class="icon-go"></i>
          </p>
        </router-link>
      </section>

      <section class="my-settle">
        <router-link :to="{ path: '/setUp'}" class="my-settle-bottom">
          <div>
            <img src="../assets/shezhi.png" style="width: 30px; height: 30px;"/>
          </div>
          <p>
            <span>设置</span><i class="icon-go"></i>
          </p>
        </router-link>
      </section>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import {appUserInfo} from '@/http/api'
import Baseline from '@/common/_baseline.vue'
import Footer from '@/common/_footer.vue'

export default {
  components: {
    'v-baseline': Baseline,
    'v-footer': Footer
  },
  data() {
    return {
      userForm: {},
      isActive: false
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid
      }
      const res = await appUserInfo(data)
      if (res.code * 1 === 200) {
        this.userForm = res.data
        if (res.data.grade * 1 === 4 || res.data.grade * 1 === 8 || res.data.grade * 1 === 6) {
          this.isActive = true
        } else {
          this.isActive = false
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.gradeActive {
  font-weight: 600;
  color: #f7bd96;
}

.car {
  width: 100%;
  height: 100%;
  background-color: #F8FCFF;

  .header {
    width: 100%;
    height: 40vw;
    background: url(../../static/carbg.png) center 0 #048AB9;
    background-size: auto 100%;
    padding: 3.2vw 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    .header-icon {
      border: .4vw solid #ffffff;
      background-color: @cl;
      margin-left: 4vw;
      -webkit-box-sizing: border-box;
      display: inline-block;
      box-sizing: border-box;
      width: 14vw;
      height: 14vw;
      line-height: 16vw;
      text-align: center;
      border-radius: 50%;
      overflow: hidden;
      position: relative;

      span {
        .fz(font-size, 54);

        &::before {
          color: #ffffff;
        }
      }

      img {
        width: 14vw;
        height: 14vw;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    > span {
      margin-left: 3.2vw;
      .fz(font-size, 30);
      color: #ffffff;
      letter-spacing: .2vw;
    }
  }

  .foreground {
    width: 92%;
    height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    box-shadow: 0px 2px 4px 2px #DDDDDD;
    border-width: 0px;

    z-index: 10000000;
    background: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    vertical-align: middle;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .item image {
    width: 40 rpx;
    height: 10 rpx;
  }

  .main {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 80px;

    .my-indent {
      width: 100%;
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #333;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 0 5vw;
      height: 15vw;
      line-height: 15vw;
      background-color: #fff;
      .bd();

      &:active {
        background-color: rgb(224, 227, 230)
      }

      .my-indent-right {
        span {
          display: inline-block;
          .fz(font-size, 28);
          color: rgba(0, 0, 0, .4);
          position: relative;
        }

        i {
          position: relative;
          top: .8vw;
        }
      }
    }

    .my-pay {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding: 2vw 0;
      background-color: #fff;
      .bd();

      > a {
        display: block;
        width: 33.33%;
        color: #999;
        text-align: center;

        > span {
          .fz(font-size, 50);
          margin-top: 2.3vw;
          display: block;
          text-align: center;
        }

        p {
          padding: 2.3vw 0;
          text-align: center;
        }
      }
    }

    .my-vip, .my-service, .my-settle {
      width: 100%;
      .mt();
      .bd();
      .bt();

      > a {
        background-color: #fff;
        display: block;
        width: 100%;
        display: -ms-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 15vw;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 6vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &:active {
          background-color: rgb(224, 227, 230);
        }

        > div {
          -ms-flex: 2;
          -webkit-box-flex: 2;
          flex: 2;
          padding-top: 1.3vw;
        }

        .my-vip-top-div {
          padding-top: 0;
        }

        > p {
          -ms-flex: 10;
          -webkit-box-flex: 10;
          flex: 10;
          position: relative;

          &:active {
            background-color: rgb(224, 227, 230);
          }

          i {
            position: absolute;
            right: 0;
            top: .4vw;
          }
        }
      }
    }
  }
}

/*图标大小不一，重新定义*/

.icon-go {
  .fz(font-size, 36);

  &::before {
    color: #aba8a8;
  }
}

[class^="icon2-"],
[class*=" icon2-"] {
  .fz(font-size, 50);
}

.icon2-service {
  .fz(font-size, 34);
}


</style>
